<template>
	<view class="wetcland-global-market">
		<view class="padding text-center">
			<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
				<view>全球市场查询</view>
			</view>
		</view>
		<view class="desc-info">
			<view class="count">
				共有{{items.length}}个物品
			</view>
		</view>
		<GlobalMarketShow v-for="v in pageList" :key="v.id"
			:playerName="v.ownerName" :itemName="v.itemName"
			:startTime="new Date(v.startTime).toLocaleDateString()" :price="v.price + ''"
			:endTime="new Date(v.endTime).toLocaleDateString()" :isOutdate="new Date().getDate() > new Date(v.endTime).getDate()"
			:bgColorClass="getRandomBgColorClass()"
		/>
		<uni-pagination title="分页" show-icon="true"
			:total="items.length" 
			:pageSize="10"
			:current="curPage"
			@change="pageChange"></uni-pagination>
	</view>
</template>

<script>
	import ajax from '../../../Ajax/index.js'
	import common from '../../../common/index.js'
	import GlobalMarketShow from '../../../component/GlobalMarketShow.vue'
	import {uniPagination} from '@dcloudio/uni-ui'
	export default {
		components: {
			GlobalMarketShow,
			uniPagination
		},
		data() {
			return {
				items: [],
				bgColorClassArr: [
					'bg-gradual-purple',
					'bg-gradual-pink',
					'bg-gradual-blue',
					'bg-gradual-green',
					'bg-gradual-orange',
					'bg-gradual-red'
				],
				pageList: [],
				curPage: 1,
			}
		},
		mounted() {
			this.getAllGMItem()
		},
		methods: {
			getAllGMItem() {
				ajax.post('globalMarket/getAllGlobalMarketRecord').then(res => {
					if (res.data.code == 200) {
						console.log(res)
						res.data.list.map(v => {
							let startTime = new Date(v.startTime)
							let endTime = new Date(v.endTime)
							v.playerName = v.ownerName
							v.date = startTime.toLocaleString()
							v.endDate = endTime.toLocaleString()
							v.isOutDate = new Date() > endTime ? '已下架' : '未下架'
							this.items.push(v)
						})
						this.pageChange({current: 1})
					}
				})
			},
			getRandomBgColorClass() {
				let random = parseInt(Math.random() * 6, 10) + 1;
				return this.bgColorClassArr[random - 1]
			},
			pageChange(v) {
				this.curPage = v.current
				let index = (this.curPage - 1)
				if(index * 10 + 8 < this.items.length) {
					this.pageList = this.items.slice(index * 10, index * 10 + 10)
				} else {
					this.pageList = this.items.slice(index * 10);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wetcland-global-market {
		padding: 0 20rpx;
		text-align: center;
	}
</style>
